<template>
    <div>
        <div  class="center">
            <p class="wenjuan">{{nowti.question_title}}<span class="xuhao">第{{nowti.sequence+1}}题</span> </p>
            <div class="height"></div>
            
            <p>从这四个选项中,选择最符合您的一个选项,和最不符合您的一个选项。您需要在十五分钟之内,且在不收干扰的情况下一次性完成调查问卷。</p>
            
            <p class="isfuhe">
                <Row>
                    <Col span="16">
                        <div class="displaynone">11</div>
                    </Col>
                    <Col span="4">
                        <span style="color:#70B603">最符合</span>
                    </Col>
                    <Col span="4">
                        <span style="color: #D9001B;">最不符合</span>
                    </Col>
                </Row>
            </p>

            <div>
                <div class="xuanxiang">
                    <ul>
                        <li v-for="item in ['A','B','C','D']" :key="item">
                            <Row>
                                <Col span="16">{{nowti['question_'+item]}}</Col>
                                <Col span="4">
                                    <Checkbox :value="match==item" @on-change="check(true,item)"></Checkbox>
                                </Col>
                                <Col span="4">
                                    <Checkbox :value="unmatch==item" @on-change="check(false,item)"></Checkbox>
                                </Col>
                            </Row>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="mybtn">
                <Row>
                    <Col span="6">
                        <div class="displaynone">11</div>
                    </Col>
                    <Col span="8">
                        <Button type="primary" @click="prev" size="large" :disabled="nowti==0">上一页</Button>
                    </Col>
                    <Col span="8">
                        <Button v-if="(nowti.sequence+1)==dataLength" size="large" @click="saveVoteResult" type="success">下一步</Button>
                        <Button
                            type="primary"
                            v-if="(nowti.sequence+1)<dataLength"
                            @click="getNextQuestion"
                            size="large"

                        >下一页</Button>
                    </Col>
                </Row>
                <ul>
                    <li
                        v-for="index in dataLength"
                        :key="index"
                        :class="{'cur': nowti.sequence+1==index}"
                    ></li>
                </ul>
            </div>

        </div>
    </div>
</template>
<script>
import http from "../../http/http";
export default {
    data() {
        return {
            nowti: {},
            match: "",
            unmatch: "",
            dataLength: 0
        };
    },
    created() {
        console.log(this.$route.query.paperId)
        if (this.$route.query.id) {
            this.$store.state.dati.paperId = this.$route.query.id;
        }
        this.loadData();
    },
    methods: {
        check(is, e) {
            if (is) {
                this.match = e;
            } else {
                this.unmatch = e;
            }
        },

        next() {
            this.getNextQuestion();
        },
        prev() {
            this.getPreviousQuestion();
        },
        loadData() {
            http.get(
                "http://localhost:3000/vote/vote_getQuestionList.action?paperId=" +
                    this.$store.state.dati.paperId
            ).then(data => {

                this.nowti = data.data[0];
                this.dataLength = data.data.length;
                console.log()
            });
        },
        saveVoteResult(){
            http.get("http://localhost:3000/vote/vote_saveVoteResult.action?sequence="+this.nowti.sequence, {
                paperId: this.$store.state.dati.paperId,
                sequence: this.nowti.sequence,
                questionId: this.nowti.questionId,
                guid: this.$store.state.dati.guid,
                match: this.match,
                unmatch: this.unmatch,
            }).then(data => {
                if(data.msg=="保存成功"){
                    this.$Message.info("保存成功")
                    this.$router({'name':'dataEdit2'})
                }else{
                    this.$Message.error("网络出错")
                }
            });
        },
        getNextQuestion(){
            http.get("http://localhost:3000/vote/vote_getNextQuestion.action?sequence="+this.nowti.sequence, {
                sequence: this.nowti.sequence,
                questionId: this.nowti.questionId,
                paperId: this.$store.state.dati.paperId,
                guid: this.$store.state.dati.guid,
                match: this.match,
                unmatch: this.unmatch,
            }).then(data => {
                this.nowti = data.data;
                this.match = this.nowti.match;
                this.unmatch = this.nowti.unmatch;
            });
        },
        getPreviousQuestion() {
            http.get("http://127.0.0.1:3000/vote/vote_getPreviousQuestion.action", {
                sequence: this.nowti.sequence,
                questionId: this.nowti.questionId,
                paperId: this.$store.state.dati.paperId,
                guid: this.$store.state.dati.guid,
                match: this.match,
                unmatch: this.unmatch
            }).then(data => {
                this.nowti = data.data;
                this.match = this.nowti.match;
                this.unmatch = this.nowti.unmatch;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.center {
    width: 800px;
    height: 550px;
    padding: 20px;

    margin: 10px auto;
    .wenjuan {
        font-weight: bold;
        font-size: 30px;
        color: black;
    }
    .height {
        height: 25px;
    }
    .xuanxiang {
        margin-top: 10px;
        margin-bottom: 10px;
        ul {
            list-style: none;
            li {
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                position: relative;
                p {
                    position: absolute;
                    right: 200px;
                    bottom: 10px;
                }
            }
        }
    }
    .xuhao {
        color: rgb(175, 175, 175);
        margin-left: 10px;
        font-size: 13px;
        margin-bottom: 6px;
    }
    .isfuhe {
        margin-top: 10px;
        .displaynone {
            opacity: 0;
        }
    }
    .mybtn {
        margin-top: 70px;
        position: relative;
        .displaynone {
            opacity: 0;
        }
        ul {
            position: absolute;
            margin-top: 60px;
            list-style: none;
            left: 50%;
            top: 50%;
            width: 600px;
            margin-left: -300px;
            li {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #eee;
                float: left;
                margin-right: 10px;
                transition: all 1s;
                &.cur {
                    background: rgb(2, 167, 240);
                    transform: scale(1.4);
                    box-shadow: 1px 1px 5px #6d6565;
                }
            }
        }
    }
}
</style>